<template>
  <div class="layer-pie-wrap flex-row">
    <div :id="pieId" ref="pieChart" class="pie-chart"></div>
<!--    <div class="split-line"></div>-->
    <ul class="legend-wrap flex-column">
      <li class="item-legend" v-for="(item, idx) in datas" :key="idx">
        <label class="item-name">
          <span>
             <span class="rect-icon" :style="{backgroundColor:colors[idx]}"></span>
          {{item.name}}
          </span>
          </label>
        <label>
          <span class="val"> {{item.value}}</span>
        </label>
      </li>
    </ul>
  </div>

</template>
<script>
import {resizeChart, pieOptions} from '@/assets/js/echartOptions.js'
export default {
  name: "PieChart",
  props: {
    // 是否是大一点的饼图
    isLarge: {
      type: Boolean,
      default: false
    },
    // 饼图id
    pieId: {
      type: String,
      default: 'pieChart'
    },
    // 饼图的颜色
    colors: {
      type: Array,
      default: () => ["#75D3BE", "#D18CD3", "#CEB680", "#79A6DA",'#549BF1','#BC5A76', '#8F54F1', '#5A70BC','#BCBF5C']
    },
    // 是否显示表表经过
    isShowTooltip: {
      type: Boolean,
      default: true
    },
    // 间隔颜色
    borderColor: {
      type: String,
      default: 'rgba(10, 29, 49, 1)'
    },
    // 饼图数据
    datas: {
      type: Array,
      default: () => []
    },
    // 饼图数据名
    name: {
      type: String,
      default: ''
    },
    // 饼图半径
    radius: {
      type: Array,
      default: () =>  ['66%', '86%']
    }
  },
  data() {
    return {
      pieChart: null,
      options: null
    };
  },
  watch: {
    datas(val) {
      this.options.datas = val;
      this.pieChart.setOption(pieOptions({...this.options}));
    }
  },
  mounted(){
    this.pieChart =  this.$echarts.init(document.querySelector(`#${this.pieId}`));
    this.options = {
        name: this.name,
        radius: this.radius,
        datas: this.datas,
        borderColor: this.borderColor,
        colors: this.colors,
        isShowTooltip: this.isShowTooltip
    };
    this.pieChart.setOption(pieOptions({...this.options}));
    resizeChart(this.pieChart)
  }
};
</script>
<style lang="less" scoped>
.layer-pie-wrap {
  width: 100%;
  height: 100%;
  align-items: center;
  overflow: hidden;
  justify-content: space-evenly;
  .pie-chart {
    height: 100%;
    width: 50%;
  }
  .split-line {
    margin: 0 10px;
    width: 2px;
    height: 162px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5548) 50%, rgba(216,216,216,0) 100%);
  }
  .legend-wrap {
    //height: 182px;
    width: calc(50% - 16px);
    //height: 100%;
    height: calc(100% - 16px);
    overflow-y: auto;
    padding-left: 16px;
    display: -webkit-box;
    //justify-content: space-evenly;
    justify-content: center;
    .item-legend {
      background: linear-gradient(90deg,rgba(64,299,240,0.2),rgba(64,299,240,0.05));
      border: 1px solid transparent;
      border-image: linear-gradient(90deg,rgba(64,299,240,0.5),rgba(64,299,240,0)) 1 4;
      border-right: none;
      font-family: SourceHanSansCN;
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      //align-items: center;
      padding: 5px 10px;
      white-space: nowrap;
      color: #c6d3ec;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      &:last-child{
        margin-bottom: 0;
      }
      .item-value,
      .item-name {
        font-size: 16px;
        font-weight: 400;
        color: #fff;
        //font-family:youshebiaoti ;

      }
      .val{
        //color: rgba(140, 217, 253, 1);
        font-size: 20px;
        //font-family: youshebiaoti;
        padding-left: 6px;
        color: #fff;
        //font-weight: bold;
      }
      .item-value {
        padding-left: 6px;
      }
      .rect-icon {
        margin-right: 10px;
        display: inline-block;
        height: 12px;
        width: 12px;
      }
      .right-angle {
        margin-right: 2px;
        display: inline-block;
        height: 21px;
        width: 21px;
        border-left: 1px dashed #fff;
        border-bottom: 1px dashed #fff;
      }
      &:first-child {
        .rect-icon {
          background: #FFE74D;
        }
        .right-angle {
          border-left-color: #FFE74D;
          border-bottom-color: #FFE74D;
        }
      }
      &:nth-child(2) {
        .rect-icon {
          background: #3CFFB4;
        }
        .right-angle {
          border-left-color: #3CFFB4;
          border-bottom-color: #3CFFB4;
        }
      }
      &:nth-child(3) {
        .rect-icon {
          background: #3CA7FF;
        }
        .right-angle {
          border-left-color: #3CA7FF;
          border-bottom-color: #3CA7FF;
        }
      }
      &:nth-child(4) {
        .rect-icon {
          background: #EC9DEE;
        }
        .right-angle {
          border-left-color: #EC9DEE;
          border-bottom-color: #EC9DEE;
        }
      }
      &:nth-child(5) {
        .rect-icon {
          background: #EFB4B4;
        }
        .right-angle {
          border-left-color: #EFB4B4;
          border-bottom-color: #EFB4B4;
        }
      }
    }
  }
}
.pie-chart-wrap {
  height: 100%;
  width: 100%;
  position: relative;
   &.large-pie-wrap {

  }
  &.normal-pie-wrap {

  }
  //.pie-chart {
  //  position: absolute;
  //  top: 0;
  //  left: 0;
  //  height: 100%;
  //  width: 100%;
  //  z-index: 9;
  //}

  .data-name {
    position: absolute;
    color: #fff;
    font-family: youshebiaoti;
    font-weight: 400;
    transform: scale(.9);
    &.item-data1 {
      left: 16px;
      top: 17px;
    }
    &.item-data2 {
      right: 14px;
      top: 17px;
    }
    &.item-data3 {
      right: 14px;
      bottom: 8px;
    }
    &.item-data4 {
      left: 16px;
      bottom: 8px;
    }
  }
  .data-value {
    position: absolute;
    font-family: youshebiaoti;
    &.item-data1 {
      left: 18px;
      top: 48px;
      color: #6CAFFF;
    }
    &.item-data2 {
      right: 16px;
      top: 48px;
      color: #72D4C0;
    }
    &.item-data3 {
      right: 16px;
      bottom: 40px;
      color: #EC9DEE;
    }
    &.item-data4 {
      left: 18px;
      bottom: 40px;
      color: #F8D68E;
    }
  }
}

</style>
